<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性选择器</title>
		<style>
			/*
				选中具有class属性的元素
			*/
			[class] {
				color: red;
			}
			
			/*
				选中具有class属性的p标签
			*/
			p[class] {
				/*
					文本对齐方式: 居中对齐;
				*/
				text-align: center;
			}
			/*
				选中class的值是a的元素
			*/
			[class="a"] {
				background-color: yellow;
			}

			/*
				选中class的值中有c的元素
			*/
			[class~="c"] {
				border: 5px solid black;
			}

			/*
				选中id=box的元素
			*/
			[id=box] {
				border: 10px dotted pink;
			}
			
			/*
				选中class的值只有d或者以d-开头的元素
			*/
			div[class|=d] {
				background-color: gold;
			}

		</style>
	</head>
	<body>
		
		<div class="a cc">我是div</div>
		<div class="a c b">我是div2</div>
		<p class="b">我是p标签</p>
		<p>我是p标签2</p>
		<p class="c">能选中啊</p>
		<div id="box">我是box</div>

		<div class="d">Hello, world!</div>
		<div class="d e">Hello, young man!</div>
		<div class="d-e">Hello, young girl!<div/>
		<div class="d-e hh">Hello, god!</div>

	</body>


</html>